Welcome to Css!

11.13 定位偏移量

1、可以使用合法的尺寸单位,百分比;

2、可以使用负值,当使用负值时,元素的偏移方向与正值相反

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>css</title>

<style type="text/css">

.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;

position:relative;

}

.box{width:302px;height:302px;border:3px solid blue;margin:50px auto;

}

.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}

.pst1{background:green; }

.pst2{background:blue;

}

.pst3{background:orange;

position:absolute;

left:-100px;

}

</style>

</head>

<body>

<div class="hhxs">

<div class="box">

<div class="pst1">1</div>

<div class="pst2">2</div>

<div class="pst3">3</div>

</div>

</div>

</body>

</html>

返回值:

3、元素相对于哪个元素进行定位,使用百分比时,就是哪个元素宽度或高度的百分比。

<style type="text/css">

.hhxs{width:400px;height:400px;border:3px solid purple;margin:50px auto;position:relative;

}

.box{width:302px;height:302px;border:3px solid blue;margin:50px auto;

position:relative;

}

.pst1,.pst2,.pst3{width:100px;height:100px;color:white;font-size:30px;line-height:100px;text-align:center}

.pst1{background:green; }

.pst2{background:blue;

position:absolute;

right:100%;

}

.pst3{background:orange;

position:absolute;

left:100%;

top:100%;

}

</style>

返回值: